import React, { useEffect, useState } from 'react'
import { Tabs } from 'antd'
import Export from './components/Export'
import Receipt from './components/Receipt'
import Reorder from './components/Reorder'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { useAppSelector } from '@/store/hooks'
const Index: React.FC = () => {
  const buttonCodeList = useAppSelector((state) => state.login.buttonCodeList) || []
  const [menuItems, setmenuItems] = useState<{ key: string; label: string; children: React.ReactNode }[]>([])
  const [defaultKey, setdefaultKey] = useState('')
  const navigate = useNavigate()
  const [query] = useSearchParams()
  useEffect(() => {
    const items: { key: string; label: string; children: React.ReactNode }[] = []
    if (buttonCodeList.includes('exportCenter')) {
      items.push({
        key: 'EXPORT',
        label: '导出任务',
        children: <Export />,
      })
      setdefaultKey('EXPORT')
    }
    if (buttonCodeList.includes('addOrderCenter')) {
      items.length === 0 && setdefaultKey('RECEIPT')
      items.push({
        key: 'RECEIPT',
        label: '单据新建',
        children: <Receipt />,
      })
    }
    if (buttonCodeList.includes('TaskReorder')) {
      items.length === 0 && setdefaultKey('REORDER')
      items.push({
        key: 'REORDER',
        label: '返单修正导入记录',
        children: <Reorder />,
      })
    }
    if (items.length === 0) {
      navigate('/403', { replace: true })
      return
    }
    setmenuItems(items)
    const type = query.get('type') || ''
    if (type) {
      setdefaultKey(type)
    }
  }, [])
  return <Tabs activeKey={defaultKey} items={menuItems} onChange={(key) => setdefaultKey(key)}></Tabs>
}

export default Index
